<template>
  <div class="main">
    <!-- 左侧信息面板 -->
    <div class="left-panel">
      <!-- 产品完成情况卡片 -->
      <div class="source-messg">
        <div slot="header" class="panel-title">
          <i class="fa fa-bar-chart"></i>
          <span class="panel-title-span">能源信息(电)</span>
        </div>
        <div style="padding: 2px; height: 18rem">
          <LingChart :chartData="chartData1" yAxisName="Kwh"></LingChart>
        </div>
      </div>
      <!-- 合计卡片 -->
      <div class="source-messg">
        <div slot="header" class="panel-title">
          <i class="fa fa-calculator"></i>
          <span class="panel-title-span">能源信息(气)</span>
        </div>
        <div style="padding: 2px; height: 18rem">
          <BarChart :chartData="chartData6" yAxisName="Nm³"></BarChart>
        </div>
      </div>
      <div>
        <div slot="header" class="panel-title">
          <i class="fa fa-bar-chart"></i>
          <span class="panel-title-span">能源信息(总汇)</span>
        </div>
        <div class="stats-card">
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="{
                        name: '完成率',
                        value: 28,
                       }"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(222,109,109,0.5)"
                defaultColor="rgb(222, 109, 109, 1)"
              />
            </div>
          </div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="{
                        name: '完成率',
                        value: 58,
                       }"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(255,223,102,0.5)"
                defaultColor="rgb(255,223,102, 1)"
              />
            </div>
          </div>
        </div>
        <div class="energy-usage">
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">本日用电量</div>
              <!-- <div class="usage-percentage-elc">3959.43Kwh</div> -->
              <div class="usage-percentage-elc">
                {{ amountTotal1 }}{{ unit1 }}
              </div>
            </div>
          </div>
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">本日用气量</div>
              <!-- <div class="usage-percentage-air">2996.5Nm³</div> -->

              <div class="usage-percentage-air">
                {{ amountTotal2 }}{{ unit2 }}
              </div>
            </div>
          </div>
        </div>
        <div class="energy-usage">
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">本月用电量</div>
              <!-- <div class="usage-percentage-elc">112199.48Kwh</div> -->
              <div class="usage-percentage-air">
                {{ amountTotal3 }}{{ unit3 }}
              </div>
            </div>
          </div>
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">本月用气量</div>
              <!-- <div class="usage-percentage-air">31494.1Nm³</div> -->
              <div class="usage-percentage-air">
                {{ amountTotal4 }}{{ unit4 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间3D/设备区 -->
    <div class="center-area">
      <!-- <div class="device-container"></div> -->
    </div>
    <!-- 右侧能源卡片区 -->
    <div class="left-panel">
      <!-- 产品完成情况卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-bar-chart"></i>
          <span class="panel-title-span">产品完成情况</span>
        </div>
        <div class="stats-card">
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chart3"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(105,165,241,0.5)"
                defaultColor="rgb(105,165,241,1)"
              />
            </div>
          </div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chart4"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(255, 223, 102, 0.5)"
                defaultColor="rgb(255, 223, 102, 1)"
              />
            </div>
          </div>
        </div>
        <div class="energy-usage">
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">本月出厂商品</div>
              <div class="usage-percentage">
                {{ number7 }}<span style="color: #fff">%</span>
              </div>
            </div>
          </div>
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">上月出厂商品</div>
              <div class="usage-percentage">
                {{ number8 }}<span style="color: #fff">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="energy-usage">
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">完成率</div>
              <div class="usage-percentage">
                {{ rate1 }}<span style="color: #fff">%</span>
              </div>
            </div>
          </div>
          <div class="usage-item">
            <div class="usage-header">
              <div class="usage-title">完成率</div>
              <div class="usage-percentage">
                {{ rate2 }}<span style="color: #fff">%</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 合计卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-calculator"></i>
          <span class="panel-title-span">合计</span>
        </div>
        <div class="stats-card">
          <div></div>
          <div class="stats-item">
            <!-- <span class="num">77%</span> -->
            <!-- <span class="desc">本月完成率</span> -->
            <div class="chart-container">
              <RingChart
                :data="chart5"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(105,241,192,0.5)"
                defaultColor="rgb(105,241,192, 1)"
              />
            </div>
          </div>
          <div class="stats-item">
            <div class="chart-container">
              <RingChart
                :data="chart6"
                :max="100"
                :centerText="(value) => `${value}%`"
                remainingColor="rgb(222,109,109,0.5)"
                defaultColor="rgb(222, 109, 109, 1)"
              />
            </div>
          </div>
        </div>
        <div class="stats-cont-right">
          <div class="stats-cont-span-tit">
            <p>本月完成情况</p>
            <p>上月完成情况</p>
          </div>
          <!-- ceshi -->
          <div class="energy-usage-ton">
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">计划吨位</div>
                <div class="usage-percentage-ton">
                  {{ number1 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">计划吨位</div>
                <div class="usage-percentage-ton-t">
                  {{ number2 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="energy-usage-ton">
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">完成吨位</div>
                <div class="usage-percentage-ton">
                  {{ number3 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">完成吨位</div>
                <div class="usage-percentage-ton-t">
                  {{ number4 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="energy-usage-ton">
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">未完成吨位</div>
                <div class="usage-percentage-ton">
                  {{ number5 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
            <div class="usage-item">
              <div class="usage-header-ton">
                <div class="usage-title">未完成吨位</div>
                <div class="usage-percentage-ton-t">
                  {{ number6 }}<span style="color: #fff">%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 设备接入实况卡片 -->
      <el-card>
        <div slot="header" class="panel-title">
          <i class="fa fa-plug"></i>
          <span class="panel-title-span">关键工序完成情况</span>
        </div>
        <ContentReal :listData="ListData" title="焊接总支数"></ContentReal>
      </el-card>
    </div>
  </div>
</template>
  <!-- 引入 Element UI JS -->
  <script>
// 初始化Vue实例
import LingChart from "@/components/LineChart/index.vue";
import BarChart from "@/components/barEchart/index.vue";
import RingChart from "@/components/Echart/index.vue";
import ContentReal from "@/views/home/components/Realstatus";
import Table from "@/views/ComprehensiveSituation/components/tabContent";

import {
  GetselectEnergyList,
  GetselectEnergyListseven,
  GetselectAirListseven,
  GetProductData,
  GetLine,
} from "@/api/advert";

import { number } from "echarts";
export default {
  components: {
    RingChart,
    ContentReal,
    Table,
    LingChart,
    BarChart,
  },
  data() {
    return {
      chart1: { value: "100"},
      chart2: { value: "" },
      chart3: { value: "" },
      chart4: { value: "" },
      chart5: { value: "" },
      chart6: { value: "" },
      opstion: {},
      chartData: [],
      amountTotal1: "",
      amountTotal2: "",
      amountTotal3: "",
      amountTotal4: "",
      unit1: "",
      unit2: "",
      unit3: "",
      unit4: "",
      startDate: "", //开始日期
      endDate: "", //结束日期
      number1: "",
      number2: "",
      number3: "",
      number4: "",
      number5: "",
      number6: "",
      number7: "",
      number8: "",
      rate1: "",
      rate2: "",
      chartData1: [
        { xAxis: "1月", seriesData: 100 },
        { xAxis: "2月", seriesData: 181451.49 },
        { xAxis: "3月", seriesData: 500 },
        { xAxis: "4月", seriesData: 700 },
        { xAxis: "5月", seriesData: 228492.65 },
        { xAxis: "6月", seriesData: 200 },
        { xAxis: "7月", seriesData: 250 },
        { xAxis: "8月", seriesData: 280 },
      ],
      chartData6: [
        { date: "1月", completed_qty: 100 },
        { date: "2月", completed_qty: 300 },
        { date: "3月", completed_qty: 500 },
        { date: "4月", completed_qty: 700 },
        { date: "5月", completed_qty: 800 },
        { date: "6月", completed_qty: 200 },
        { date: "7月", completed_qty: 250 },
        { date: "8月", completed_qty: 280 },
      ],
      deviceData: [
        { name: "手工氩弧焊机", online: 0, total: 7, status: "standby" },
        { name: "气保焊机", online: 0, total: 5, status: "standby" },
        { name: "带极堆焊机", online: 0, total: 10, status: "standby" },
        { name: "等离子切割机", online: 0, total: 3, status: "standby" },
        { name: "空压机", online: 0, total: 2, status: "standby" },
      ],
      ListData: [
        { id: 0, title: "焊接总支数", value: "--" },
        { id: 1, title: "探伤总支数", value: "--" },
        { id: 2, title: "弯管总支数", value: "--" },
        { id: 3, title: "焊口总数", value: "--" },
        { id: 4, title: "焊口总数", value: "--" },
        { id: 5, title: "弯头总数", value: "--" },
      ],
    };
  },
  mounted() {
    // var myChart3 = echarts.init(document.getElementById("stats-item"));
  },
  created() {
    // line
   
    this.getPrevious6MonthsWithDate();
    // 汇总
    this.getEnergyAll3();
    this.getEnergyAll4();
    // 电
    this.getEnergy();
    // 气
    this.getAir();
	 this.getLine(); 
    // 产品完成情况
    this.getProduct();
  },
  methods: {
    // 计算日期
    getPrevious6MonthsWithDate() {
      const result = [];
      const today = new Date();
      const currentDate = today.getDate(); // 当前日（1-31）
      for (let i = 0; i < 8; i++) {
        // 计算目标月份（当前月减去i）
        const targetDate = new Date(today);
        targetDate.setMonth(today.getMonth() - i);
        // 处理月份天数不足的情况（如31日在只有30天的月份）
        // 若设置日期超过当月最大天数，会自动滚动到下月，这里需要修正
        const maxDate = new Date(
          targetDate.getFullYear(),
          targetDate.getMonth() + 1,
          0
        ).getDate();
        const actualDate = Math.min(currentDate, maxDate);
        targetDate.setDate(actualDate);

        // 格式化年月日为两位数
        const year = targetDate.getFullYear();
        const month = String(targetDate.getMonth() + 1).padStart(2, "0");
        const date = String(actualDate).padStart(2, "0");

        result.push(`${year}-${month}-${date}`);
        console.log(result, "?????????");
      }
      this.startDate = result[0];
      // this.endDate = result[result.length - 1];
      this.endDate = result.at(-1);
    },
    getLine() {
		console.log(this.endDate)
      let params ={
    "dimension": "monthly",
    "mediumTypeCode": "electricity",
    "equipmentCodes": [
        "PipeBranch"
    ],
   "startDate": this.endDate,
   "endDate": this.startDate
}
      GetLine(params).then((res) => {
		  console.log(params)
		  console.log(res,"'''''''''''''''''''''''''''''''''")
		  // debugger
        // this.chartData1 = res.data.results[0].indicatorData.Dosage.valueList;
      });
    },
    // getBar() {
    //   let params = {
    //     dimension: "daily",
    //     mediumTypeCode: "electricity",
    //     equipmentCodes: ["PipeBranch"],
    //     startDate: this.startDate,
    //     endDate: this.endDate,
    //   };
    //   GetLine(params).then((res) => {
    //     this.chartData6 = res.data.result.indicatorData.Dosage.valueList;
    //   });
    // },
    // 总汇  日电
    getEnergyAll3() {
      let params = {
        "dimension": "daily",
        "mediumTypeCode": "electricity",
        "equipmentCodeList": ["PipeBranch"],
		// endDate
        "endDate": this.startDate,
        "startDate": this.endDate,
      };
	
      GetselectEnergyList(params).then((res) => {
		  console.log(params,"llllllllllllllllllllll")
		  console.log(res,"tyssssssssssssssssssssssss")
        // this.chart1.value = res.data.results[0].ratio;
        // this.chart2.value = "100%";
        this.amountTotal1 = res.data.results[0].amountTotal;
        this.unit1 = res.data.results[0].unit;
      });
    },
    // 总汇  日气
    getEnergyAll4() {
     let params = {
       "dimension": "daily",
       "mediumTypeCode": "gas",
       "equipmentCodeList": ["PipeBranch"],
     		// endDate
       "endDate": this.startDate,
       "startDate": this.endDate,
     };
      GetselectEnergyList(params).then((res) => {
        // this.chart1.value = res.data.result.valueList[0].amount;
        // this.chart2.value = res.data.result.valueList[1].amount;
        this.amountTotal2= res.data.results[0].amountTotal;
        this.unit2= res.data.results[0].unit;
      });
    },
    // yue电
    getEnergy() {
    let params = {
      "dimension": "monthly",
      "mediumTypeCode": "electricity",
      "equipmentCodeList": ["PipeBranch"],
    		// endDate
      "endDate": this.startDate,
      "startDate": this.endDate,
    };

      GetselectEnergyList(params).then((res) => {
        // this.chart1.value = res.data.result.valueList[0].amount;
        // this.chart2.value = res.data.result.valueList[1].amount;
        this.amountTotal3=res.data.results[0].amountTotal;
        this.unit3=res.data.results[0].unit;
      });
    },
    // 月气
    getAir() {
     let params = {
       "dimension": "monthly",
       "mediumTypeCode": "gas",
       "equipmentCodeList": ["PipeBranch"],
     		// endDate
       "endDate": this.startDate,
       "startDate": this.endDate,
     };
      GetselectEnergyList(params).then((res) => {
        // this.chart1.value = res.data.result.valueList[0].amount;
        // this.chart2.value = res.data.result.valueList[1].amount;
        this.amountTotal4 = res.data.results[0].amountTotal;
        this.unit4 = res.data.results[0].unit;
      });
    },
    // 产品完成情况
    getProduct() {
		let params={ 
 "source": "数字孪生", 
 "trantime": "20230202080000",//接口传输时间
 "message": { 
 "month_id":"202507"// 月份 
 } 
}
      // 确保在获取到tableCont数据后执行这段代码
      // （例如在接口请求成功的回调中，或mounted钩子中）
      GetProductData(params).then((res) => {
		  console.log(res,"ssssss")
        this.number1 = res.data.monthlycompletionstatus.this_month_plan_ton_qty;
        this.number2 = res.data.monthlycompletionstatus.last_month_plan_ton_qty;
        this.number3 =
          res.data.monthlycompletionstatus.this_month_completed_ton_qty;
        this.number4 =
          res.data.monthlycompletionstatus.last_month_completed_ton_qty;
        this.number5 =
          res.data.monthlycompletionstatus.this_month_occupation_ton_per;
        this.chart5.value = this.number5;
        this.number6 =
          res.data.monthlycompletionstatus.last_month_occupation_ton_per;
        this.chart6.value = this.number6;
        this.number7 =
          res.data.monthlycompletionstatus.this_month_completed_qty;
        this.number8 =
          res.data.monthlycompletionstatus.last_month_completed_qty;
        this.rate1 = res.data.monthlycompletionstatus.this_month_occupation_per;
        this.rate2 = res.data.monthlycompletionstatus.last_month_occupation_per;
        this.chart3.value = this.rate1;
        this.chart4.value = this.rate2;
        // 关键
        let tableCont = res.data.keyprocessescompletionstatus;
		console.log(tableCont,"ssssssssss");
		debugger
        this.ListData.forEach((item) => {
          switch (item.id) {
            case 0:
              item.value = tableCont.welding_qty; // 焊接总支数 → welding_qty
              break;
            case 1:
              item.value = tableCont.inspection_qty; // 探伤总支数 → inspection_qty
              break;
            case 2:
              item.value = tableCont.bent_qty; // 弯管总支数 → bent_qty
              break;
            case 3:
              item.value = tableCont.welds_qty; // 焊口总数 → welds_qty
              break;
            case 4:
              item.value = tableCont.inspection_welds_qty; // 探伤焊口总数 → inspection_welds_qty
              break;
            case 5:
              item.value = tableCont.elbows_qty; // 弯头总数 → elbows_qty
              break;
            default:
              item.value = "暂无数据"; // 处理未匹配的id
          }
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
// @import "./css/home.css";
.source-messg {
  margin: 10px 0;
  // background: red;
}
.chart-container {
  height: 117px;
  width: 117px;
  margin: 10px 0;
  box-sizing: border-box;
}
.left-panel .el-card {
  // background: red;
  height: 30%;
}
.left-panel .el-card:last-child {
  // background: red;
  flex: 1;
  height: 100%;
}
// .stats-item {
// }

.text {
  display: flex;
  // color: red;
  justify-content: space-evenly;
  // background: yellowgreen;
}
.text-title {
  width: 100px;
  text-align: left;
}
.highlight {
  margin-left: 20px;
  color: #e16060 !important;
  font-weight: bold;
  text-align: left;
}

.highlight1 {
  width: 50px;
  // vertical-align: middle;
  // background: rebeccapurple;
  margin-left: 5px;
  color: #bdffd1 !important;
  font-weight: bold;
}
.top-cont {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cont-title {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: right;
}
</style>
